<template>
  <div class="common-layout h100">
    <el-container class="h100">
      <el-header class="my-header">
        <div class="logo"></div>
        <h3 class="title">宠物店预约管理系统</h3>
        <div class="logout-container">
          <el-button type="danger" size="small" @click="logout" round>注销</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" style="background: #545c64">
          <el-menu
              router
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="/dashboard"
              text-color="#fff"
          >
            <template v-for="mi in menuItems">
              <el-sub-menu v-if="Array.isArray(mi.children)" :index="mi.url">
                <template #title>
                  <span>{{mi.name}}</span>
                </template>

                <el-menu-item v-for="smi in mi.children" :index="mi.url">
                  <span>{{smi.name}}</span>
                </el-menu-item>
              </el-sub-menu>

              <el-menu-item v-else :index="mi.url">
                <span>{{mi.name}}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>
        <el-main style="background: white">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped>
.h100{
  height: 100%;
}

.my-header {
  height: 75px;
  display: flex;
  align-items: center;
  padding: 0 !important;
  background-color: #8FB7EF;
  position: relative;
}

.logo{
  margin: 0;
  height: 75px;
  width: 199px;
  background: url("@/assets/ae1370c0-ca43-11e9-8723-5b2e79bed1bc_312e5bdd-8128-4389-9cf0-8504d1dfd3ea_thumb.jpg") no-repeat center center/cover;
}

.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

.logout-container {
  position: absolute;
  right: 20px;
}

/* 调整按钮样式（可选） */
.el-button--danger {
  background-color: #ff4d4f;
  border-color: #ff4d4f;
}

.el-button--danger:hover {
  background-color: #ff7875;
  border-color: #ff7875;
}
</style>

<script setup>
import {reactive} from "vue";
import {removeJwt} from "@/api/jwt.js";
import router from "@/router/index.js";

//注销功能
function logout(){
  removeJwt();
  router.push("/login");
}
//设置对象值
const menuItems = reactive([{
  name:"数据看板",
  url:"/main/dashboard"
},{
  name:"客户管理",
  url:"/main/user"
},{
  name:"宠物管理",
  url:"/main/pet"
},{
  name:"服务管理",
  url:"/main/orders"
},{
  name:"预约管理",
  url:"/main/appointment"
}])
</script>